<template>
    <div class="boxContentCss">
        <EdCreateCard :title="isUpdate ? '编辑住户信息' : '新增住户信息'">
                <template #back>
                    <div class="createBack" @click="reset" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <el-form style="padding:45px 45px 15px 15px" :model="form"  ref="ruleForm" label-position='right' label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item class="width-m25" label="选择房屋" prop="roomId"  :rules="$validate.validates({required:true,msg:'请选择房屋'})">
                                <RoomInput class="mr-2" :room.sync="form.roomId" :disabled="isdisabled" @update:room="getRoomId"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="width-m25"  label="住户姓名" prop="residentName" :rules="$validate.validates({required:true,msg:'请输入住户姓名',type:'name'})">
                                <el-input class="flex-input"  maxlength="20" v-model="form.residentName"  :disabled="nameDisabled"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="width-m25"  label="身份证号" prop="idCard" >
                                <el-input class="flex-input"  v-model="form.idCard" :disabled="cardDisabled"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="width-m25"  label="住户身份" prop="identity" :rules="$validate.validates({required:true,msg:'请输入住户身份'})">
                                <EdSelect ref="select" :selectParams="identityParams" v-model="form.identity" ></EdSelect>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item class="width-m25"  label="手机号" prop="phone"  :rules="$validate.validates({required:true,msg:'请输入手机号', type:'mobile'})" >
                                <el-input class="flex-input"  v-model="form.phone" placeholder="请输入住户预留手机号" :disabled="phoneDisabled"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="width-m25"  label="是否为重要客户" prop="important">
                                <template>
                                    <el-radio v-model="form.important" label="1">是</el-radio>
                                    <el-radio v-model="form.important" label="0">否</el-radio>
                                </template>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <!-- <el-form-item class="width-m25"  label="合同起止时间" >                           
                                        <el-date-picker  type="datetime" style="width:46.5%" v-model="form.contractStartTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                        placeholder="开始日期">
                                        </el-date-picker>
                                        至
                                        <el-date-picker type="datetime" style="width:46.5%" v-model="form.contractEndTime" format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            placeholder="结束日期">
                                        </el-date-picker>
                            </el-form-item>-->
                            <el-form-item class="width-m25"  label="合同起止时间" prop="time">                           
                                    <el-date-picker
                                        style="width:100%"
                                        v-model="time"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item class="width-m25"  label="入住时间" prop="liveTime">
                                <el-date-picker
                                    style="width:100%"
                                    v-model="form.liveTime"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择入住时间">
                                    </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item  label="车位信息" prop="parkRecord" >
                                <el-input v-model="form.parkRecord" placeholder="请输入车位信息，多个车位请用英文逗号隔开" maxlength="11" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item  label="车牌信息" prop="carCard" >
                                <el-input v-model="form.carCard" placeholder="请输入车牌信息，多个车牌请用英文逗号隔开" maxlength="11"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="备注" prop="note" >
                                <el-input class="flex-input"  v-model="form.note" style="width:100%" placeholder="请输入备注信息" ></el-input>
                            </el-form-item>  
                        </el-col>
                    </el-row>
                    <el-row>
                        <!-- <el-col :span="12" v-if="isUpdate">
                            <el-form-item label="关联的房屋" prop="linkRooms" >
                                <el-input class="flex-input"  v-model="form.linkRooms" style="width:100%" placeholder="请输入关联的房屋" ></el-input>
                            </el-form-item>  
                        </el-col> -->
                    </el-row>
                    <div class="projectButton" >
                        <el-button type="info" @click="submit()" class="ed-button ed_black-bottom" >提&nbsp;&nbsp;交</el-button>
                        <el-button @click="reset" icon-class="back" class="ed-button ed_white_bottom">取&nbsp;&nbsp;消</el-button>
                    </div>
            </el-form>
        </EdCreateCard>
    </div>
</template>

<script>
    import RoomInput from 'src/components/HousePicker/RoomInput.vue'
    import {addHousehold, getHouseholdDetailById, editHousehold,ownerExist} from "./api.js";
    import ApiTable from 'src/components/ApiTable.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import EdDateTimePicker from 'src/components/EdDateTimePicker.vue'
    import WisdomUploadSingle from "src/components/WisdomUploadSingle.vue";
    import { defineComponent } from 'vue'
    import {getDictByCode} from "src/api/dictionaries";
    export default defineComponent({
        name: "projectCreate",
        components: { EdCreateCard, EdDateTimePicker, WisdomUploadSingle,EdSelect,ApiTable,RoomInput},
        data(){
            return{
                time:[],
                form:{
                    carCard: "",
                    phone:'',
                    contractEndTime: "",
                    contractStartTime: "",
                    idCard: "",
                    identity: '',
                    important: '',
                    liveTime: "",
                    note: "",
                    parkRecord: "",
                    residentId: 0,
                    residentName: "",
                    residentPhone: "",
                    residentStatus: "",
                    roomCode: "",
                    villageId: 0,
                    roomId:'',
                    time: [],
                    linkRooms:''
                },
                isImportant:0,
                isNotImportant:1,
                selectParams:{
                    placeholder:"请选择所属公司",
                    options: [],
                    props: {label:"label", value:"value"}
                },
                liveTimeParams:{
                    placeholder:"请选择入住时间",
                    options:[],
                    props: {label:"label", value:"value"}
                },
                isUpdate:false,
                identityParams:{
                    options: [],
                    props:{label:'label', value:'value'},
                    placeholder:"请选择住户身份"
                },
                isdisabled:false,
                nameDisabled:false,
                cardDisabled:false,
                phoneDisabled:false
            }
        },
        watch:{
            time: {
                deep: true,
                immediate: true,
                handler(newVal, oldVal) {
                    if(newVal  && newVal.length == 1) {
                        this.form.contractStartTime = newVal[0]
                    }
                    if(newVal && newVal.length > 1) {
                        this.form.contractStartTime = newVal[0]
                        this.form.contractEndTime = newVal[1]
                    }
                }
            },
        },
        activated(){
            this.$nextTick(()=>{
                this.$refs['ruleForm'].resetFields()
            })
            getDictByCode("household_identity").then(response => {
                if(response.success) {
                    this.identityParams.options=response.data.items
                }
            })
            // 判断一下是否是根据id传过来的参数，如果是就是点击编辑按钮，多一个关联房屋的input框
            if(this.$route.query.id){
                this.isUpdate=true;
                this.isdisabled = true
                this.getHouseholdDetailById()
            }else{
                this.isUpdate = false
                this.isdisabled = false
            }

            
        },
        deactivated() {
            this.form ={
                carCard: "",
                contractEndTime: "",
                contractStartTime: "",
                idCard: "",
                identity: '',
                important: '',
                liveTime: "",
                note: "",
                parkRecord: "",
                phone:'',
                residentId: 0,
                residentName: "",
                residentPhone: "",
                residentStatus: "",
                roomCode: "",
                villageId: 0,
                roomId:'',
                time: [],
                linkRooms:''
            }
            this.time=[]
            // this.$refs.HousePicker.data.displayValue = ''
        },
        methods:{
            submit(){
                if(this.form.time && this.form.time.length > 0) {
                    this.form.contractStartTime = this.form.time[0]
                    this.form.contractEndTime = this.form.time[1]
                
                }
                
                this.$refs['ruleForm'].validate((valid)=>{
                    if(!valid) {
                        this.$refs.select.disabled = false
                        return
                        
                    }
                    // 先判断是部署编辑按钮，如果是的就调编辑的api
                    if(this.isUpdate){
                        editHousehold(this.form).then(response => {
                            if(response.success) {
                                this.$message.success({
                                    message: '编辑住户成功！',
                                    duration: 2000,
                                    center:true
                                });
                                this.reset()
                            }
                        })  
                    }else{
                        // 如果是新增就调新增的接口
                        addHousehold(this.form).then(response => {
                            if(response.success) {
                                this.$message.success({
                                    message: '新增住户成功！',
                                    duration: 2000,
                                    center:true
                                });
                                this.reset()
                            }
                        })  
                    }
               
                })
            },
            getHouseholdDetailById(){
                getHouseholdDetailById({id:this.$route.query.id}).then(response => {
                    if(response.success) {
                        this.$set(this.$data, 'form',{...response.data,
                            important:response.data.important.toString(),
                            identity:response.data.identity.toString()
                        })
                        // if(this.form.residentStatus==0 && this.form.identity==0){
                        //     this.isdisabled = true
                        // }else{
                        //     this.isdisabled = false
                        // }
                        if(response.data.contractStartTime && response.data.contractEndTime){
                            this.time.push(response.data.contractStartTime)
                            this.time.push(response.data.contractEndTime)
                           
                        } else {
                            this.time=[]
                        }
                        
                        // 如果是业主点编辑进去，姓名，身份证，手机号有值就禁用，没值不禁用
                        if(response.data.identity == 0){
                            if(response.data.residentName && response.data.residentName!=""){
                                this.nameDisabled = true
                            } else {
                                this.nameDisabled = false
                            }
                            if(response.data.idCard && response.data.residentName!=""){
                                this.cardDisabled = true
                            } else {
                                this.cardDisabled = false
                            }
                            if(response.data.phone && response.data.residentName!=""){
                                this.phoneDisabled = true
                            } else {
                                this.phoneDisabled = false
                            }
                        } else {
                            this.nameDisabled = false
                            this.cardDisabled = false
                            this.phoneDisabled = false
                        }
                        this.setIdentityParams(response.data.roomId)
                        if(this.form.residentStatus==0 && this.form.identity==0){
                            this.$refs.select.disabled = true
                        }else{
                            this.$refs.select.disabled = false

                        }
                        
                    }
                })
            },
            getRoomId(obj) {
                console.log('getRoomId', obj);
                // 根据房间id查询是否关联了业主
                this.setIdentityParams(obj)
            },
            reset() {
                this.$nextTick(()=>{
                    this.$refs['ruleForm'].resetFields()
                })
                
                this.$router.back()
            },
            setIdentityParams(obj) {
                let that = this
                if(obj) {
                    ownerExist(obj).then(res => {
                        if(res.success) {
                            let obj = res.data
                            console.log(obj);
                            // 代表有业主了，要把下拉框禁用
                            if(obj && obj.length > 0) {
                                if(!this.isUpdate){
                                    this.form.identity=''
                                }
                                that.identityParams.options.forEach(x=> {
                                    if(x.id==24) {
                                        x.disabled = true
                                        x.label = '业主 '
                                    }
                                })
                                console.log(that.identityParams.options)
                            } else {
                                that.identityParams.options.forEach(x=> {
                                    if(x.id==24) {
                                        x.disabled = false
                                        x.label = '业主' + ""
                                    }
                                })
                            }
                        }
                    })
                }
            }
        }
    })
</script>

<style lang="scss" scoped>
:deep .el-form-item{
    .el-select{
        width: 100%;
    }
}
.width-m50{
    min-width: 50%;
}
.boxContentCss{
    position: relative;
    padding-bottom: 150px;
    
}
.projectButton{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    margin-left: 120px;
}
.createBack{
    margin-right: 50px;
}

</style>